<template>
    <div>
        <!-- 播放器容器 -->
        <div ref="playerContainer" class="player-container"></div>
        <!-- 提示信息 -->
        <div v-if="message" class="message">{{ message }}</div>
    </div>
</template>

<script>
import Player from "nplayer"; // 引入 NPlayer
import Hls from "hls.js"; // 引入 hls.js

export default {
    name: "HlsPlayer",
    data() {
        return {
            player: null, // 用于保存 NPlayer 实例
            hls: null, // 用于保存 hls.js 实例
            qualityLevels: [
                {
                    height: 240,
                    width: 426,
                    bitrate: 400000,
                    name: "240P",
                },
                {
                    height: 360,
                    width: 640,
                    bitrate: 800000,
                    name: "360P",
                },
                {
                    height: 720,
                    width: 1280,
                    bitrate: 1500000,
                    name: "720P",
                },
            ], // 用于保存清晰度列表
            message: "", // 提示信息
            limitTime: 3, // 限制播放时间（单位：秒）
        };
    },
    mounted() {
        this.initPlayer(); // 初始化播放器
    },
    methods: {
        initPlayer() {
            // 创建 video 元素
            const videoElement = document.createElement("video");
            this.$refs.playerContainer.appendChild(videoElement);

            // 初始化 hls.js
            if (Hls.isSupported()) {
                this.hls = new Hls();
                this.hls.loadSource(
                    "http://api.mars.admin.com/hls/output.m3u8"
                ); // 替换为你的 HLS 流地址
                this.hls.attachMedia(videoElement);

                // 监听 MANIFEST_PARSED 事件，获取清晰度列表
                this.hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
                    this.qualityLevels = data.levels; // 保存清晰度列表
                    this.setupPlayer(videoElement); // 初始化 NPlayer
                });
            } else if (
                videoElement.canPlayType("application/vnd.apple.mpegurl")
            ) {
                // 如果浏览器原生支持 HLS（如 Safari）
                videoElement.src = "http://api.mars.admin.com/hls/output.m3u8"; // 替换为你的 HLS 流地址
                videoElement.addEventListener("loadedmetadata", () => {
                    this.setupPlayer(videoElement); // 初始化 NPlayer
                });
            }
        },
        setupPlayer(videoElement) {
            // 初始化 NPlayer 实例
            this.player = new Player({
                video: videoElement, // 绑定 video 元素
                container: this.$refs.playerContainer, // 播放器容器
                controls: true, // 显示控制条
                autoplay: false, // 不自动播放
                loop: false, // 不循环播放
                muted: false, // 不静音
                volume: 0.5, // 初始音量
            });

            // 添加清晰度切换功能
            if (this.qualityLevels.length > 0) {
                this.addQualitySwitcher();
            }

            // 监听播放事件
            videoElement.addEventListener("play", this.onPlay);
            videoElement.addEventListener("timeupdate", this.onTimeUpdate);

            // 将播放器挂载到容器
            this.player.mount(this.$refs.playerContainer);
        },
        addQualitySwitcher() {
            // 创建清晰度切换菜单项
            const qualityItems = this.qualityLevels.map((level, index) => ({
                text: `${level.height}P`, // 清晰度标签（例如 240P、720P）
                value: index, // 清晰度索引
            }));

            // 添加清晰度切换按钮
            this.player.controls.addSetting({
                id: "quality", // 按钮 ID
                title: "清晰度", // 按钮标题
                items: qualityItems, // 清晰度菜单项
                value: this.hls.currentLevel, // 当前清晰度
                change: (value) => {
                    this.hls.currentLevel = value; // 切换清晰度
                },
            });

            // 监听清晰度切换事件
            this.hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
                this.player.controls.updateSetting("quality", data.level); // 更新清晰度按钮状态
            });
        },
        onPlay() {
            this.message = "视频开始播放";
        },
        onTimeUpdate() {
            const currentTime = this.player.video.currentTime;
            if (currentTime >= this.limitTime) {
                this.player.video.pause(); // 暂停视频
                this.message = `视频已播放 ${this.limitTime} 秒，播放结束`;
                this.player.video.removeEventListener(
                    "timeupdate",
                    this.onTimeUpdate
                ); // 移除监听
            }
        },
    },
    beforeDestroy() {
        // 销毁播放器和 hls.js 实例
        if (this.player) {
            this.player.destroy();
        }
        if (this.hls) {
            this.hls.destroy();
        }
    },
};
</script>

<style scoped>
.player-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.message {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    text-align: center;
}
</style>
